<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<body>
		<button id="btn">打开一个新标签页进行通讯</button>
		<script>
			// 创建一个通讯频道。只要name相同，就可以跨标签通讯，
			// 测试的时候，打开两个次页面看测试效果
			const channel = new BroadcastChannel('name');
			document.getElementById('btn').onclick = function () {
				channel.postMessage({
					type: 'A',
				});
			};
			channel.addEventListener('message', e => {
				console.log(e);
			});
		</script>
	</body>
</html>
